<template>
	<!-- 组件资源-调用量 -->
	<div class="moduleResource-container">
		<!-- 第一行 -->
		<el-row :gutter="20">
			<!-- 组件调用概况 -->
			<el-col :span="12">
				<div class="moduleResource-center">
					<titleView text="组件调用概况" :font-size="24" :bg-image="require('@/assets/image/yunziyuan.png')" />
					<el-row :gutter="20" style="height:300px;display: flex;align-items: center;">
						<el-col :span="8">
							<div class="content">
								<div @click="totalityDialod()" style="width: 250px; cursor:pointer;" class="content-item" v-for="(item, idx) in centerLeftContentData" :key="idx">
									<div class="item item-value">{{ item.value }}次</div>
									<div class="item item-label">{{ item.label }}</div>
								</div>
							</div>
						</el-col>
						<el-col :span="16">
							<div id="totalityEcharts" style="width:600px;height:300px;"> </div>
						</el-col>
					</el-row>
				</div>
			</el-col>
			<!-- 组件调用量走势 -->
			<el-col :span="12">
				<div class="moduleResource-center">
					<titleView text="组件调用量走势" :font-size="24" :bg-image="require('@/assets/image/yunziyuan.png')" />
					<div id="applyEcharts" style="width:800px;height:300px;"> </div>
				</div>
			</el-col>
		</el-row>
		<!-- 第二行 -->
		<el-row :gutter="20">
			<!-- 组件被调用量排行 -->
			<el-col :span="12">
				<div class="moduleResource-center" style="height: 500px;">
					<titleView text="组件被调用量排行" :font-size="24" :bg-image="require('@/assets/image/yunziyuan.png')" />
					<el-table :data="tableData" height="400px" style="width: 100%;margin-top:20px;" :header-cell-style="{ backgroundColor: '#f5f7fa' }">
						<el-table-column type="index" label="序号"> </el-table-column>
						<el-table-column prop="componentName" label="组件名称"> </el-table-column>
						<el-table-column prop="organization" label="组件所属单位"> </el-table-column>
						<el-table-column label="调用总次数（次）">
							<template slot-scope="scope">
								<el-button type="text" @click="dialogShow(scope.row,'componentName','被调用列表')">{{ scope.row.num1 }}</el-button>
							</template>
						</el-table-column>
						<el-table-column label="失败次数（次）">
							<template slot-scope="scope">
								<el-button type="text" @click="dialogShow(scope.row,'componentName','被调用失败列表')">{{ scope.row.num2 }}</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</el-col>
			<!-- 应用调用量排行 -->
			<el-col :span="12">
				<div class="moduleResource-center" style="height: 500px;">
					<titleView text="应用调用量排行" :font-size="24" :bg-image="require('@/assets/image/yunziyuan.png')" />
					<div id="ranksEcharts" style="width:800px;height:450px;"> </div>
				</div>
			</el-col>
		</el-row>
		<!-- 组件总体概况弹窗 -->
		<Dialog :visible="dialodData.show" :title="dialodData.title" @update:visible="dialodData.show = !dialodData.show">
			<el-table :data="tableData" height="500px" style="width: 100%;margin-top:20px;" :header-cell-style="{ backgroundColor: '#f5f7fa' }">
				<el-table-column type="index" label="序号"> </el-table-column>
				<el-table-column prop="appName" label="应用名称"> </el-table-column>
				<el-table-column prop="appOrganization" label="应用所属单位"> </el-table-column>
				<el-table-column prop="appContacts" label="应用联系人"></el-table-column>
				<el-table-column prop="appUseNum" label="组件调用次数（次）"></el-table-column>
			</el-table>
		</Dialog>
	</div>
</template>
  
<script>
import { mapGetters } from 'vuex'
import Dialog from '@/components/dialog'
import titleView from '@/components/title'
import countContent from '@/components/countContent'
import textAndCount from '@/components/textAndCount'
export default {
	name: 'DataResource',
	components: {
		Dialog,
		titleView,
		countContent,
		textAndCount
	},
	computed: {
		...mapGetters(['name'])
	},
	data() {
		return {
			// 概况左侧数据
			centerLeftContentData: [
				{ id: 0, label: '组件调用次数', label1: '支撑领域数', value: '1452990', value1: '7' }
			],
			// 表格数据
			tableData: [
				{ id: 0, componentName:'渝快政用户体系', organization:'市大数据局', num1: '840', num2: '288', appName:'渝快政',appOrganization:'市大数据局',appContacts:'--',appUseNum:'236581' },
				{ id: 1, componentName:'渝快政组织体系', organization:'市大数据局', num1: '840', num2: '288', appName:'电子通行证管理',appOrganization:'市大数据局',appContacts:'--',appUseNum:'10384' },
				{ id: 2, componentName:'用户单点登录', organization:'市大数据局', num1: '840', num2: '288', appName:'渝康码异常排查',appOrganization:'市大数据局',appContacts:'--',appUseNum:'9715' },
				{ id: 3, componentName:'防疫健康信息核验', organization:'市大数据局', num1: '840', num2: '288', appName:'渝康码工单系统',appOrganization:'市大数据局',appContacts:'--',appUseNum:'9541' },
				{ id: 4, componentName:'渝快政消息通知', organization:'市大数据局', num1: '840', num2: '288', appName:'异常排查系统',appOrganization:'市大数据局',appContacts:'--',appUseNum:'9249' },
				{ id: 4, componentName:'渝快政消息通知', organization:'市大数据局', num1: '840', num2: '288', appName:'网信办办公系统',appOrganization:'市委网信办',appContacts:'--',appUseNum:'8739' },
				{ id: 4, componentName:'渝快政消息通知', organization:'市大数据局', num1: '840', num2: '288', appName:'渝康码赋码平台',appOrganization:'市大数据局',appContacts:'--',appUseNum:'8257' },
				{ id: 4, componentName:'渝快政消息通知', organization:'市大数据局', num1: '840', num2: '288', appName:'市政协办公系统',appOrganization:'市政协',appContacts:'--',appUseNum:'7943' },
				{ id: 4, componentName:'渝快政消息通知', organization:'市大数据局', num1: '840', num2: '288', appName:'科研合同系统',appOrganization:'重庆社科院',appContacts:'--',appUseNum:'7923' },
				{ id: 4, componentName:'渝快政消息通知', organization:'市大数据局', num1: '840', num2: '288', appName:'工作简报',appOrganization:'市委保密办',appContacts:'--',appUseNum:'5773' },
			],
			// 弹窗参数
			dialodData: {
				show: false,
				title: null,
			},
		}
	},
	created() {

	},
	mounted() {
		this.totalityEcharts()
		this.applyEcharts()
		this.ranksEcharts()
	},
	methods: {
		totalityDialod() {
			this.dialodData.show = true
		},
		// 组件调用概况
		totalityEcharts() {
			let myChart = this.$echarts.init(document.getElementById('totalityEcharts'));
			let option = {
				color: ['#4eb4e5','#ffbd59'],
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					right: '50',
					top: 'center',
					itemWidth: 5,
					itemHeight: 5
				},
				series: [
					{
						type: 'pie',
						radius: ['50%', '70%'],
						center: ['40%', '50%'],
						avoidLabelOverlap: false,
						label: {
							show: true,
							formatter(param) {
								return param.value + '%';
							}
						},
						labelLine: {
							show: true,
						},
						data: [
							{ value: 145240999.94, name: '调用成功次数' },
							{ value: 5810.04, name: '调用失败次数' },
						]
					}
				]
			};
			myChart.setOption(option);
		},
		// 组件调用量走势
		applyEcharts() {
			let myChart = this.$echarts.init(document.getElementById('applyEcharts'));
			let option = {
				color: ['#4eb4e5','#2de92a','#ffbd59'],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'line'
					}
				},
				legend: {
					data: ['组件调用数量', '调用成功数量', '调用失败数量'],
					bottom: 10
				},
				xAxis: {
					axisTick: {
						alignWithLabel: true
					},
					type: 'category',
					data: ['2022-10', '2022-11', '2022-12', '2023-01', '2023-02', '2023-03'],
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						name: '组件调用数量',
						data: [59293, 61724, 17378, 12653, 17063, 29874],
						type: 'line',
						smooth: true,
						areaStyle: {}
					},
					{
						name: '调用成功数量',
						data: [59370, 61693, 17370, 12647, 17054, 29857],
						type: 'line',
						smooth: true,
						areaStyle: {}
					},
					{
						name: '调用失败数量',
						data: [234, 435, 512, 15, 641, 756],
						type: 'line',
						smooth: true,
						areaStyle: {}
					}
				]
			};
			myChart.setOption(option);
		},
		// 应用调用量排行
		ranksEcharts() {
			let myChart = this.$echarts.init(document.getElementById('ranksEcharts'));
			let option = {
				color: ['#4eb4e5'],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				legend: {},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					show: false,
					type: 'value',
				},
				yAxis: {
					type: 'category',
					data: ['渝康码异常排查系统', '网信办办公系统', '渝康码赋码管理平台', '异常排查系统', '渝康码工单系统', '电子通行证管理系统']
				},
				series: [
					{
						type: 'bar',
						data: [16987, 17245, 18234, 18924, 19245, 21935],
						label: {
							show: true,
							position: 'outside'
						},
					},
				]
			}
			myChart.setOption(option);
		},
		// 调用弹窗
		dialogShow(row,field,type) {
			this.dialodData.show = true
      this.dialodData.title = row[field] + type
		}
	},
}
</script>
  
<style lang="scss" scoped>
.moduleResource-container {
	width: 1862px;
	margin: 30px auto;
	/**头部css */
	.moduleResource-header,
	.moduleResource-center {
		background: #ffffff;
		border-radius: 16px 16px 16px 16px;
		padding: 20px;
		margin-bottom: 20px;
	}
	.content {
		display: flex;
		justify-content: space-around;
		padding: 30px;
	}
	.content-item {
		width: 300px;
		height: 130px;
		background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(242, 242, 242, 1) 100%);
		border: 1px solid rgba(215, 215, 215, 1);
		color: #4F4F4F;
		border-radius: 15px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.item {
			font-size: 24px;
			font-weight: bold;
			margin: 10px 0;
		}
	}
}
</style>
  